/* 
    基础选择器：
       1. id选择器：
           格式：
              #head{
                样式属性名： 属性值;
                ...
              }

       2. class属性选择器：
            .sco1{
                样式属性名： 属性值;
                ...
            }

       3. 标签元素选择器：
            div{
              样式属性名： 属性值;
                ...
            }

       4. 通配符选择器：
           *{
                样式属性名： 属性值;
                ...
           }

*/
/* 将所有的元素的内边距和外边距都设置为0 */
*{
    margin: 0px;
    padding: 0px;
}

/* 设置游戏界面的样式  */
#container{
    /* 设置宽度为：350px, 高度：480px */
    width: 350px;
    height: 480px;
    /* 设置背景图片 */
    background-image: url('../img/bg.jpg');
    /* 让背景图片占满整个盒子div */
    background-size: 100% 100%;
    /* 让游戏界面水平居中 */
    /* margin: 0 auto; */
    /* 让游戏界面中的子元素相对游戏界面进行定位 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* 让超过游戏界面的管道隐藏 */
    /* overflow: hidden; */

}

/* 设置头部元素的样式 */
#head{
    /* 头部元素对于游戏界面是绝对定位 */
    position: absolute;
    /* 距离游戏左边界：50px */
    left: 50px;
    /* 距离游戏界面上边界：150px */
    top: 150px;
}

/* 设置平行飞翔的小鸟的样式 */
#head span{
    height: 26px;
    width: 40px;
    /* 让手动设置的宽度和高度生效 */
    display: inline-block;

    /*设置背景图片*/
    background-image: url('../img/bird0.png');

    /* 设置鸟的定位 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;

}
/* 设置分数样式 */
#score{
    /* 字体大小 */
    font-size: 60px;
    /* 设置定位：
          距离顶部：70px ,水平方向居中
    */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;

    /* 调高分数的显示层级 */
    z-index: 10;

}
/* 设置开始按钮样式 */
#start{
    /* 设置开始按钮相对游戏界面的定位 */
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
}
/* 给小鸟本鸟进行样式设置 */
#bird{
    position: absolute;
    left: 30px;
    top: 40px;
    /* 默认隐藏  none : 隐藏   block : 显示*/
    display: none;
   
    /* 设置小鸟的层级显示 */
    z-index: 10;

    /* 小鸟的边框 */
    /* border: 3px solid white; */
}

.up_duct{
    width: 62px;
    position: relative;
    top: 0px;

    background-image: url('../img/up_mod.png');
    background-repeat: repeat-y;

    /* 上管道的边框 */
    /* border: 3px solid black; */
}
.up_duct img{
    position: absolute;
    bottom: 0px;
}


.down_duct{
    position: absolute;
    bottom: 0px;
    background-image: url('../img/down_mod.png');
    background-repeat: repeat-y;

     /* 下管道的边框 */
     /* border: 3px solid black; */
}


#duct li{
   width: 62px;
   height: 425px; 
   position: absolute;
   top: 0px;
   left: 300px;

   /* 去掉每一个li前面的黑点 */
   list-style-type: none;
}

/* 设置游戏结束图片的样式 */
#gameover{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 160px;

    /* 默认影藏 */
    display: none;
}